import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '@/views/Index.vue'
import Login from '@/views/Login.vue'
// 1. 注册 Vue 组件
// Vue.use 是用来 注册插件 他会调用传入对象 的 install 方法
Vue.use(VueRouter)

// 路由规则
const routes = [
    {
        name: 'login',
        path: '/login',
        component: Login
    },
    //嵌套路由
    {
        path: '',
        name: 'Index',
        component: Index
    },
    {
        path: '/detail/:id', // :id 占位符
        name: 'Detail',
        //开启 props 会把 url 中的参数传递给组件
        //在组件中通过props来接收 URL 参数
        props: true,
        //路由懒加载 当程序访问组件时 才加载组件
        component: () => import('@/views/Detail.vue')
    },
    {
        path: '/blog',
        name: 'Blog',
        component: () => import('../views/Blog.vue')
    },
    {
        path: '/photo',
        name: 'Photo',
        component: () => import('../views/Photo.vue')
    },
    {
        path:'*',
        name:'404',
        component: ()=> import('@/views/404.vue')
    }
]

// 2  创建 router 对象
const router = new VueRouter({
    routes,
    mode: 'history'
})

export default router